<template>
  <view class="wrapper">
    <!-- 订单状态 -->
    <view class="tabs">
      <text class="active">全部</text>
      <text>待付款</text>
      <text>已付款</text>
      <text>退款/退货</text>
    </view>
    <!-- 所有订单 -->
    <scroll-view class="orders" scroll-y>
      <view class="item"
      v-for="item in orders"
      :key="item.order_id">
        <!-- 商品图片 -->
        <block v-for="(good,idx) in item.goods"
        :key="idx">
        <image class="pic" :src="good.goods_small_logo" />
        <!-- 商品信息 -->
        <view class="meta">
          <view class="name">{{good.goods_name}}</view>
          <view class="price">
            <text>￥</text>{{good.goods_price}}
            <text>.00</text>
          </view>
          <view class="num">x{{good.goods_number}}</view>
        </view>
        </block>
        <!-- 总价 -->
        <view class="amount">共{{item.goods.length}}件商品 总计: ￥{{item.total_price}}(含运费0.00)</view>
        <!-- 其它 -->
        <view class="extra">
          订单号: {{item.order_number}}
          <button @click="pay(item.order_number)" size="mini" type="primary">支付</button>
        </view>
      </view>
      <!-- 死数据模版样例 -->
      <view class="item">
        <!-- 商品图片 -->
        <image class="pic" src="http://static.botue.com/ugo/uploads/goods_1.jpg" />
        <!-- 商品信息 -->
        <view class="meta">
          <view class="name">【海外购自营】黎珐(ReFa) MTG日本 CARAT铂金微电流瘦脸瘦身提拉紧致V脸美容仪 【保税仓发货】</view>
          <view class="price">
            <text>￥</text>1399
            <text>.00</text>
          </view>
          <view class="num">x1</view>
        </view>
        <!-- 总价 -->
        <view class="amount">共1件商品 总计: ￥4099(含运费0.00)</view>
        <!-- 其它 -->
        <view class="extra">
          订单号: GD20180511000000000178
          <button size="mini" type="primary">支付</button>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      orders: []
    }
  },
  onLoad () {
    // 获取订单数据
    this.getOrderList()
  },
  methods: {
    async getOrderList () {
      // 1.判断是否登录
      // hm_token="Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjIsImlhdCI6MTU5NDM0NDY5MywiZXhwIjoxMDAxNTk0MzQ0NjkyfQ.qakcJ4wUlBvYsNbhTgRsEdAKzJie5iI_wWBifRGXJ8U "
      let token = uni.getStorageSync('hm_token');
      if (!token) {
        return uni.navigateTo({url: '/packone/auth/index'});
      }
      // 2.登录过就获取订单列表数据
      const {msg:{status}, data} = await this.request({
        url: '/api/public/v1/my/orders/all',
        data: {
          type: 1
        },
        header: {
          Authorization: token //自定义请求头信息
        }
      });
      console.log('订单', data);
      
      if (status === 200) {
        this.orders = data.orders;
      }
    },
    // 支付方法
    async pay (order_number) {
      // 调用后台接口去支付，后台去跟微信通信
      const {msg: {status}, data} = await this.request({
        url: '/api/public/v1/my/orders/req_unifiedorder',
        method: 'post',
        data: {
          order_number
        },
        header: {
          Authorization: uni.getStorageSync('hm_token') //自定义请求头信息
        },
        success: (res) => {
          console.log(res.data);
          this.text = 'request success';
        }
      });
      console.log(status, data);
      if (status === 200) {
        // 支付之前，预订单生成成功。调用微信支付的窗口
        const [error, msg] = await uni.requestPayment(data.pay);
        if (!error) {
          // 支付成功
          console.log(msg);
          uni.showToast({
            title: '支付成功!',
            duration: 2000
          });
        } else {
          // 支付失败
          console.log(error);
          uni.showToast({
            title: '支付失败!',
            duration: 2000
          });
        }
      }
    }
  }

};
</script>

<style scoped lang="scss">
.tabs {
  display: flex;
  height: 96rpx;
  line-height: 96rpx;
  background-color: #fff;
  box-shadow: 0 4rpx 10rpx #ccc;

  text {
    flex: 1;
    text-align: center;
    font-size: 27rpx;
    color: #333;

    &.active {
      color: #ea4451;
    }
  }
}

.orders {
  width: 100%;
  background-color: #f4f4f4;

  position: absolute;
  top: 97rpx;
  bottom: 0;
}

.item {
  padding: 30rpx 20rpx 0;
  margin-top: 16rpx;
  background-color: #fff;

  .pic {
    width: 200rpx;
    height: 200rpx;
    float: left;
  }

  .meta {
    height: 200rpx;
    margin-left: 230rpx;
    font-size: 27rpx;
    color: #333;
    position: relative;
  }

  .name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .price {
    position: absolute;
    bottom: 0;

    color: #ea4451;
    font-size: 33rpx;

    text {
      font-size: 22rpx;
    }
  }

  .num {
    position: absolute;
    bottom: 0;
    right: 20rpx;
    color: #333;
  }

  .amount {
    text-align: right;
    padding: 20rpx;
    font-size: 24rpx;
    border-top: 1rpx solid #eee;
    border-bottom: 1rpx solid #eee;
    margin-top: 20rpx;
    color: #999;
  }

  .extra {
    padding: 30rpx;
    font-size: 24rpx;
    color: #999;
    position: relative;

    button {
      position: absolute;
      right: 20rpx;
      font-size: 24rpx;
      margin-top: -10rpx;
    }
  }
}
</style>
